<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <div class="host-body">
        <main class=" mainclass w-full h-full">
          <header class=" h-1/3 w-full bg-[#1e1e1e] flex flex-col ">
            <FHeader class="w-full h-[20%] " @linkTo="handleClick" :buttons="buttons" :showSearch="true"
              @toggleSearchBar="toggleSearchBar" />
            <!-- <section class="headerBar w-full h-[20%] flex">
              <div class="title text-xl md:text-2xl text-white font-black ml-18 mt-6    ">焊接专家知识库智能应用云平台</div>
              <div class="btns  ml-auto w-[21%] flex items-center">
                <Search class="mt-1 cursor-pointer " @click="showSearchBar = !showSearchBar" />
                <el-button class="setSize h-full mt-2" :class="button.text == '登录' ? '-!ml-3' : ''" size="large"
                  v-for="button in buttons" :key="button.text" @click="handleClick(button.click)" :type="button.type"
                  :text="button.type == '' ? true : false">{{
                    button.text }}</el-button>
              </div>
            </section> -->
            <section class="bgimage flex-1">

            </section>
          </header>
          <section class="h-2/3 relative ">
            <div class="affixDiv fixed   -right-36 bottom-3 cursor-pointer">
              <div class="affixDiv-item w-14 h-14" @click="goTo(index)" v-for="(affix, index) in 4" :key="affix"></div>
            </div>
            <div ref="searchBarRef" class=" transition    bg-[#F5F8FA]   w-full  absolute  h-46  hiddenAni  ">
              <div
                class="wrapForsearchBarItem transition   w-full h-full  relative  flex-col justify-center items-center  hidden ">
                <searchBar class="" />
                <div class="labels  flex flex-row gap-2">
                  <label class="rounded-3xl bg-white text-[#989898] p-3 text-center w-30" v-for="(label, key) in labelS"
                    :key="key">{{ label }}</label>
                </div>
              </div>

            </div>
            <div class="sectionItems  w-full pt-8 flex gap-8 flex-wrap flex-row justify-center items-center  ">
              <Card class=" w-[45%] bg-white h-1/2 justify-start "
                :class="(items.length % 2 == 1 && index == items.length - 1) ? ' w-[90%]' : ''"
                v-for="(item, index) in items" :key="index" :title="item.title" :wordPic="item.wordPic"
                :itemsList="item.desc" :clickFor="item.click ?? ''"></Card>
            </div>
          </section>

        </main>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import FHeader from '@/components/Header/index.vue'
import useDraw from "@/plugins/resize/useDraw.ts";
// import Search from '@/components/search/index.vue'
import searchBar from '@/components/search/searchBar.vue'
import Card from '@/components/BoxWrap/index.vue'
import { isUndefined } from 'lodash-es'

const { appRef, calcRate, windowDraw } = useDraw();
let router = useRouter()
let searchBarRef = ref()
let showSearch = ref(true)
const showSearchBar = ref(false)
let items = [
  {
    title: '用户反馈',
    wordPic: false,
    desc: [
      {
        title: '用户张三在搜索「气保焊碳钢 AI 模型」相关问题',
        click: ''
      },
      {
        title: '用户李四提了一个新问题「如何实现金属加工过程数字化、智能化」',
        click: ''
      },
      {
        title: '用户李四提了一个新问题「金属热加工成形机理的积淀」',
        click: ''
      },
      {
        title: '户李四提了一个新问题「金属热加工成形机理的积淀」',
        click: ''
      }
    ],
  },
  {
    title: '用户实验',
    wordPic: false,
    desc: [
      {
        title: '用户小明今天做了一个关于「金属热加工成形」的实验,提交了一组数据',
        click: ''
      },
      {
        title: '用户小刘今天做了一个关于「FFT 焊缝形貌模拟预测」的实验,提交了一组数据'
      },
      {
        title: '用户小文今天做了一个关于「电阻点焊碳钢AI优化」的实验,提交了一组数据'
      },
      {
        title: '用户小王今天做了一个关于「基于振动的FSW质量诊断」的实验,提交了一组数据'
      }

    ],
  },
  {
    title: '应用',
    wordPic: true,
    desc: [
      {
        title: '搅拌摩擦焊',
        img: '/homeAssets/p21.png',
        click: () => {
          router.push('/dataManage/index')
        }
      },
      {
        title: '熔焊',
        img: '/homeAssets/p21.png',
        click: () => { }
      },
      {
        title: '点焊',
        img: '/homeAssets/p21.png',
        click: () => { }
      },
      {
        title: '弧焊',
        img: '/homeAssets/p21.png',
        click: () => { }
      },
      {
        title: '激光焊',
        img: '/homeAssets/p21.png',
        click: () => { }
      }
    ],
  },
  {
    title: '研究',
    click: 'algorithm',
    wordPic: true,
    desc: [
      {
        title: '随机森林算法',
        img: '/homeAssets/p1.jpg',
        click: () => {
          router.push('/modelTrain/index')
        }
      },
      {
        title: 'GBDT',
        img: '/homeAssets/p1.jpg',
        click: () => {
        }
      },
      {
        title: '线性回归算法',
        img: '/homeAssets/p1.jpg',
        click: () => {
        }
      },
      {
        title: '多层感知机算法',
        img: '/homeAssets/p1.jpg',
        click: () => {
        }
      },
      {
        title: 'SVM算法',
        img: '/homeAssets/p1.jpg',
        click: () => {

        }
      }
    ],
  },
  {
    title: '材料',
    wordPic: true,
    desc: [
      {
        title: '钢铁',
        img: '/homeAssets/p3.png',
        click: () => { }
      },
      {
        title: '铝合金',
        img: '/homeAssets/p3.png',
        click: () => { }
      },
      {
        title: '铜合金',
        img: '/homeAssets/p3.png',
        click: () => { }
      },
      {
        title: '镍合金',
        img: '/homeAssets/p3.png',
        click: () => { }
      }
    ],
  },

]
let buttons = [
  { type: '', text: '问答', click: 'comment' },
  { type: '', text: '登录', click: 'login' },
  { type: 'primary', text: '注册', click: 'register' },
]

const goTo = (gt) => {
  switch (Number(gt)) {
    case 4:

      break;
    case 0:
      showSearchBar.value = !showSearchBar.value
      break;
    case 1:

      break;
    case 2:
      router.push('/login')
      break;
  }
}

const labelS = ['热门', '最新', '关注', '推荐'] as const

const toggleSearchBar = () => {
  showSearchBar.value = !showSearchBar.value
}
const handleClick = (c: any) => {
  switch (c.flag) {
    case 'login':
      router.push({ path: "/login" })
      break;
    case 'comment':
      router.push({ path: "/comments" })
    case 'register':
      router.push({ path: "/register" })


    default:
      break;
  }
}
watch(showSearchBar, (newVal) => {
  let wrapForsearchBarItem = searchBarRef.value.querySelector('.wrapForsearchBarItem') ?? undefined
  if (newVal) {
    if (!isUndefined(wrapForsearchBarItem)) {
      wrapForsearchBarItem.parentNode.classList.add('showAni')
      wrapForsearchBarItem.parentNode.classList.remove('hiddenAni')
    }
  } else {
    if (!isUndefined(wrapForsearchBarItem)) {
      wrapForsearchBarItem.parentNode.classList.add('hiddenAni')
      wrapForsearchBarItem.parentNode.classList.remove('showAni')
    }
  }
})
onMounted(() => {
  calcRate()
  windowDraw()
})
</script>

<style lang='scss' scoped>
.affixDiv-item:nth-of-type(1) {
  background-image: url('/homeAssets/affix1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 0%;
}

.affixDiv-item:nth-of-type(2) {
  background-image: url('/homeAssets/affix1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 40%;
}

.affixDiv-item:nth-of-type(3) {
  background-image: url('/homeAssets/affix1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 79%;
}

.affixDiv-item:nth-of-type(4) {
  background-image: url('/homeAssets/affix1.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-y: 119%;
}

body {
  overflow-x: hidden;
}

.showAni {
  display: flex !important;
  z-index: 999999;
  animation: showAni .25s;

  .wrapForsearchBarItem {
    display: flex !important;
  }
}

.hiddenAni {
  display: none !important;
  animation: hiddenAni .25s;
}

@keyframes showAni {
  0% {
    transform: translateY(-5.25rem);
  }

  100% {
    transform: translateY(0);
    display: none !important;
  }
}

@keyframes hiddenAni {
  0% {
    transform: translateY(-5.25rem);
  }

  100% {
    transform: translateY(0rem);
  }
}

.mainclass {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.bgimage {
  background-image: url('/homeAssets/hbg.jpg');
  background-repeat: no-repeat;
  background-size: contain;
}

.setSize {
  --el-font-size-base: 23px;
  --el-button-text-color: #fff;
}

.el-button.is-text:hover {
  --el-button-text-color: #000080 !important;
}

.el-button:last-of-type {
  margin-left: 0px !important;
}
</style>